import React, { useState } from 'react';
import { createComment } from '../api';
import { useParams } from 'react-router-dom';

interface Props {
  onCommented?: () => void;
}

const CommentBox: React.FC<Props> = ({ onCommented }) => {
  const [content, setContent] = useState('');
  const { postId } = useParams();

  const handleSubmit = async () => {
    if (postId && content.trim()) {
      await createComment({ content, postId });
      setContent('');
      onCommented?.();
    }
  };

  return (
    <div>
      <textarea
        value={content}
        onChange={e => setContent(e.target.value)}
        placeholder="写评论..."
      />
      <button onClick={handleSubmit}>评论</button>
    </div>
  );
};

export default CommentBox;